<template>
  <div class="inheritor-card" @click="goToDetail(inheritor.id)">
    <div class="card-image">
      <img :src="inheritor.image" :alt="inheritor.name">
    </div>
    <div class="card-content">
      <h3>{{ inheritor.name }}</h3>
      <span class="category-badge">{{ getCategoryName(inheritor.category) }}</span>
      <p class="description">{{ truncateDescription(inheritor.description) }}</p>
      <div class="card-footer">
        <span class="region">{{ inheritor.region }}</span>
        <button class="view-detail">查看详情</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InheritorCard',
  props: {
    inheritor: {
      type: Object,
      required: true
    }
  },
  methods: {
    truncateDescription(description) {
      return (description || "").slice(0, 100); // ✅ 安全访问
    },
    getCategoryName(categoryId) {
      const categories = {
        music: '传统音乐',
        dance: '传统舞蹈',
        craft: '传统技艺',
        medicine: '传统医药'
      };
      return categories[categoryId] || categoryId;
    },
    goToDetail(id) {
      this.$emit('click', id); // 触发点击事件
    }
  }
}
</script>

<style scoped>
.inheritor-card {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  background: white;
}

.inheritor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-image {
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.inheritor-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 15px;
}

.card-content h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  color: #333;
}

.category-badge {
  display: inline-block;
  padding: 3px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 10px;
}

.description {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.region {
  font-size: 0.8rem;
  color: #888;
}

.view-detail {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid #42b983;
  color: #42b983;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.3s;
}

.view-detail:hover {
  background: #42b983;
  color: white;
}
</style>